<template>
	<div v-loading="loading">
		<div class="layout-padding-auto layout-padding-view">
			<div class="top-order-info">
				<span>订单号：{{ orderInfo.orderNo }}</span>
				<el-divider direction="vertical" />
				<el-tag :type="orderInfo.payStatus == '1' ? 'success' : 'danger'" round>
					{{ orderInfo.payStatus == '1' ? '已支付' : '未支付' }}
				</el-tag>

				<span v-if="orderInfo.payStatus == '1'">
					{{ orderInfo.paymentType == '1' ? '微信支付' : orderInfo.paymentType == '2' ? '支付宝支付' : '未知' }}
				</span>
				<el-divider v-if="orderInfo.paymentTime" direction="vertical" />

				<span v-if="orderInfo.paymentTime">付款时间：{{ orderInfo.paymentTime }}</span>

				<el-divider v-if="orderInfo.receiverTime" direction="vertical" />
				<span v-if="orderInfo.receiverTime">收货时间：{{ orderInfo.receiverTime }}</span>
			</div>
			<div class="order-status-row">
				<div class="row-left">
					<div v-if="orderInfo.status == '1'" class="title">等待买家付款，超时系统自动取消并返还库存。</div>
					<div v-if="orderInfo.status == '2'">
						<div class="title">
							买家已付款，等待商家发货
							<p style="font-size: 14px; color: rgb(150, 151, 153)">买家已付款至待结算账户，请尽快发货，否则买家有权申请退款。</p>
						</div>
						<div>
							<el-button type="primary" @click="deliverOrder(orderInfo)">发货</el-button>
						</div>
					</div>
					<div v-if="orderInfo.status == '3'">
						<div class="title">商家已发货，等待签收。</div>

						<div v-if="orderInfo.orderLogistics.logisticsDesc" style="color: #e6a23c">
							{{ '< ' + orderInfo.orderLogistics.logisticsDesc + '>' }}
								<el-button link type="primary" @click="dialog = true">详情</el-button>
						</div>
					</div>
					<div v-if="orderInfo.status == '4'">
						<div class="title">交易完成</div>
					</div>
					<div v-if="orderInfo.status == '11'">
						<div class="title">交易已关闭</div>
					</div>
				</div>
				<div class="row-right">
					<div style="width: 80%" v-if="orderInfo.status != '11'">
						<el-steps :active="stepActive" finish-status="success">
							<el-step title="买家待付款">
								<template #icon>
									<SvgIcon name="iconfont icon-0_round_solid" :size="40" />
								</template>
							</el-step>
							<el-step title="商家待发货">
								<template #icon>
									<SvgIcon name="iconfont icon-2_round_solid" :size="40" />
								</template>
							</el-step>
							<el-step title="买家待收货">
								<template #icon>
									<SvgIcon name="iconfont icon-3_round_solid" :size="40" />
								</template>
							</el-step>
							<el-step title="交易完成">
								<template #icon>
									<SvgIcon name="iconfont icon-4_round_solid" :size="40" />
								</template>
							</el-step>
						</el-steps>
					</div>
				</div>
			</div>
			<div class="order-info">
				<div class="item" v-if="orderInfo.orderLogistics">
					<div class="title">收货人信息</div>
					<div class="content">
						<p>
							<span>收货人:</span>
							<span>{{ orderInfo.orderLogistics.addresseeName }}</span>
						</p>
						<p>
							<span>联系电话:</span>
							<span>{{ orderInfo.orderLogistics.telephone }}</span>
						</p>
						<p>
							<span>收货地址:</span>
							<span>{{ orderInfo.orderLogistics.detailAddress }}</span>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="title">配送信息</div>
					<div class="content">
						<p>
							<span>配送方式：</span>
							<span>
								{{ orderInfo.deliveryWay == '1' ? '普通快递' : orderInfo.deliveryWay == '2' ? '上门自提' : '' }}
							</span>
						</p>
						<p v-if="orderInfo.deliveryWay == '1'">
							<span v-if="orderInfo.deliverTime">发货时间：{{ orderInfo.deliverTime }}</span>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="title">付款信息</div>

					<div class="content">
						<p>
							<span>实付金额:</span>
							<span style="color: red">￥{{ orderInfo.paymentPrice }}</span>
						</p>
						<p v-if="orderInfo.paymentType">
							<span>付款方式:</span>
							<span>
								{{ orderInfo.paymentType == '1' ? '微信支付' : orderInfo.paymentType == '2' ? '支付宝支付' : '未知' }}
							</span>
						</p>
						<p v-if="orderInfo.paymentTime">
							<span>付款时间:</span>
							<span v-if="orderInfo.paymentTime">{{ orderInfo.paymentTime }}</span>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="title">买家信息</div>
					<div class="content">
						<p>
							<span>买家:</span>
							<span v-if="userInfo">{{ userInfo.nickName }}</span>
						</p>
						<p>
							<span>手机号:</span>
							<span v-if="userInfo">{{ userInfo.phone }}</span>
						</p>
						<p>
							<span>头像:</span>
							<span v-if="userInfo">
								<el-image style="width: 50px; height: 50px" :src="userInfo.avatarUrl"
									:preview-src-list="[userInfo.avatarUrl]" fit="cover" :preview-teleported="true" />
							</span>
						</p>
					</div>
				</div>
			</div>
			<div class="order-info logistics" v-if="orderInfo.orderLogistics">
				<div class="item">
					<div class="title">发货信息</div>
					<div class="content">
						<p>
							<span>快递公司：</span>
							<span>{{ orderInfo.orderLogistics.logisticsName }}</span>
						</p>
						<p>
							<span>快递单号：</span>
							<span>{{ orderInfo.orderLogistics.logisticsNo }}</span>
						</p>
						<p>
							<span>发货时间：</span>
							<span>{{ orderInfo.deliverTime }}</span>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="title">物流状态</div>
					<div class="content">
						<p>
							<span>物流状态：</span>
							<span>{{ orderInfo.orderLogistics.stateDesc }}</span>
						</p>
						<p>
							<span>签收状态：</span>
							<span>{{ orderInfo.orderLogistics.isCheck == '1' ? '已签收' : '' }}</span>
						</p>
					</div>
				</div>
				<div class="item" v-if="orderInfo.orderLogistics" style="overflow-y: auto">
					<div class="title">物流明细</div>
					<div class="content">
						<el-timeline style="margin-top: 20px">
							<el-timeline-item v-for="(item, index) in orderInfo.orderLogistics.orderLogisticsDetailList"
								:key="index" :hollow="index == 0" :color="index == 0 ? '#409EFF' : ''"
								:timestamp="item.logisticsTime">
								{{ item.logisticsContext }}
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>
			</div>
			<el-table :data="orderInfo.orderItemList" border>
				<el-table-column prop="date" label="商品信息" width="300">
					<template #default="scope">
						<div class="order-item">
							<div style="width: 350px">
								<el-row>
									<el-col :span="6">
										<el-image style="width: 60px; height: 60px" :src="scope.row.picUrl" fit="cover"
											:preview-teleported="true"></el-image>
									</el-col>
									<el-col :span="18">
										<span class="overflow-line-clamp-2 name">{{ scope.row.spuName }}</span>
										<p>{{ scope.row.specsInfo }}</p>
									</el-col>
								</el-row>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="salesPrice" label="单价（元）" width="180" />
				<el-table-column prop="buyQuantity" label="数量" />
				<el-table-column prop="freightPrice" label="运费" />
				<el-table-column prop="couponPrice" label="优惠金额（元）" />
				<el-table-column prop="paymentPrice" label="小记（元）" />
				<el-table-column prop="address" label="状态">
					<template #default="scope">
						<el-tag :type="scope.row.status == '0' ? 'info' : 'danger'" effect="light" round>
							{{ scope.row.statusDesc }}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<!--订单金额明细-->
			<div class="amount-info">
				<div>
					<p>
						<span>商品总价：</span>
						<span>￥{{ orderInfo.totalPrice }}</span>
					</p>
					<p>
						<span>运费：</span>
						<span style="color: red">+￥{{ orderInfo.freightPrice }}</span>
					</p>
					<p>
						<span>优惠券：</span>
						<span style="color: red">-￥{{ orderInfo.couponPrice }}</span>
					</p>
					<p v-if="orderInfo.payStatus == '1'" class="pay-type">
						<span>支付方式：</span>
						<span>
							{{ orderInfo.paymentType == '1' ? '微信支付' : orderInfo.paymentType == '2' ? '支付宝支付' : '未知' }}
						</span>
					</p>
					<p class="pay-price">
						<span>实收金额：</span>
						<span>￥{{ orderInfo.paymentPrice }}</span>
					</p>
				</div>
			</div>
			<el-dialog v-model="dialog" title="物流明细" width="40%">
				<el-timeline v-if="orderInfo.orderLogistics.orderLogisticsDetailList" style="margin-top: 20px">
					<el-timeline-item v-for="(item, index) in orderInfo.orderLogistics.orderLogisticsDetailList"
						:key="index" :hollow="index == 0" :color="index == 0 ? '#409EFF' : ''"
						:timestamp="item.logisticsTime">
						{{ item.logisticsContext }}
					</el-timeline-item>
				</el-timeline>
			</el-dialog>
			<Deliver ref="refDeliver" @handleSuccess="getDetail"></Deliver>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, reactive, toRefs, ref } from 'vue';
import { getById } from '/@/api/mall/orderinfo';
import { useRoute } from 'vue-router';
interface OrderLogistics {
	stateDesc: string;
	isCheck: string;
	logisticsName: string;
	logisticsNo: string;
	addresseeName: string;
	telephone: string;
	detailAddress: string;
	orderLogisticsDetailList: Array<any>;
	logisticsDesc: string;
}
interface DataState {
	orderInfo: {
		orderNo: string;
		payStatus: string;
		paymentType: string;
		paymentTime: string;
		paymentPrice: number;
		totalPrice: number;
		freightPrice: number;
		couponPrice: number;
		receiverTime: string;
		deliverTime: string;
		deliveryWay: string;
		orderLogistics: OrderLogistics;
		orderItemList: Array<any>;
		status: string;
	};
	userInfo: {
		avatarUrl: string;
		phone: string;
		nickName: string;
	};
	stepActive: number;
	dialog: boolean;
}
export default defineComponent({
	components: { Deliver: defineAsyncComponent(() => import('../deliver/index.vue')) },
	setup() {
		const data = reactive<DataState>({
			orderInfo: {
				orderNo: '',
				payStatus: '',
				paymentType: '',
				paymentTime: '',
				paymentPrice: 0,
				totalPrice: 0,
				freightPrice: 0,
				couponPrice: 0,
				receiverTime: '',
				status: '',
				deliverTime: '',
				deliveryWay: '',
				orderLogistics: {
					stateDesc: '',
					isCheck: '',
					logisticsName: '',
					logisticsNo: '',
					addresseeName: '',
					telephone: '',
					detailAddress: '',
					orderLogisticsDetailList: [],
					logisticsDesc: '',
				},
				orderItemList: [],
			},
			userInfo: { avatarUrl: '', phone: '', nickName: '' },
			stepActive: 0,
			dialog: false,
		});
		const loading = ref(false);
		const refDeliver = ref();
		const route = useRoute();
		const getDetail = () => {
			const { id } = route.query;
			if (id) {
				loading.value = true;
				getById(id)
					.then((response: any) => {
						loading.value = false;
						data.orderInfo = response.data.data;
						let status = data.orderInfo.status;
						data.stepActive = Number(status) - 1;
						data.userInfo = response.data.data.userInfo;
					})
					.catch(() => {
						loading.value = false;
					});
			}
		};
		/**
		 * 发货
		 */
		const deliverOrder = (row: any) => {
			refDeliver.value.initPage(row.id, row.orderLogisticsId);
		};
		getDetail();
		return {
			loading,
			refDeliver,
			getDetail,
			deliverOrder,
			...toRefs(data),
		};
	},
});
</script>
<style scoped lang="scss">
.order-status-row {
	display: flex;
	border: 1px solid #ebedf0;
	padding: 30px;
	margin-top: 20px;

	.title {
		font-size: 20px;
		font-weight: 700;
		color: #323233;
		line-height: 28px;
		margin-bottom: 20px;
	}
}

.row-left {
	width: 33%;
	padding: 28px 16px;
	font-size: 14px;
}

.row-right {
	flex: 1;
	border-left: 1px solid #ebedf0;
	align-items: center;
	justify-content: center;
	display: flex;
}

.order-item {
	display: flex;
	justify-content: space-between;
	padding: 5px;

	.name {
		color: #409eff;
	}
}

.logistics-title {
	margin-bottom: 16px;
	color: #323233;
	font-weight: 700;
}

.top-order-info {
	span {
		padding: 10px;
	}
}

.order-info {
	display: flex;
	margin-bottom: 16px;
	background-color: #f7f8fa;
	border: 1px solid #fefef0;

	.item {
		flex: 1;
		padding: 16px 12px;
		color: #646566;
		font-size: 14px;
	}

	.title {
		margin-bottom: 16px;
		color: #323233;
		font-weight: 700;
	}

	.content {
		p {
			margin-bottom: 8px;
			display: flex;
			color: #646566;
			font-size: 12px;

			span {
				&:first-child {
					width: 80px;
				}

				&:last-child {
					flex: 1;
				}
			}
		}
	}
}

.amount-info {
	display: flex;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 16px 32px 16px 0;
	color: #646566;

	p {
		margin-bottom: 8px;
		display: flex;
		color: #646566;
		font-size: 12px;

		&.pay-price {
			margin-top: 20px;
			color: #323233;
			font-size: 14px;
			font-weight: 600;

			span {
				&:last-child {
					font-weight: bold;
					color: #d40000;
					font-size: 18px;
				}
			}
		}

		&.pay-type {
			margin-top: 20px;
			color: #323233;
			font-size: 14px;
			font-weight: 600;

			span {
				&:last-child {
					font-weight: bold;
					font-size: 16px;
				}
			}
		}

		span {
			&:first-child {
				width: 100px;
			}

			&:last-child {
				flex: 1;
			}
		}
	}
}

.logistics {
	height: 300px;
	background-color: #fff;
	border: 1px solid #ebedf0;
}
</style>
